<template>
  <div class="home">
    <el-card shadow="hover">
      <div class="userInfo">
        <div class="avavtot">
          <el-avatar :size="150" :src="user.headerUrl"></el-avatar>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="info">
          <div class="person">
            <div>用户名：</div>
            <div>邮箱：</div>
            <div>学院：</div>
            <div>专业：</div>
            <div>年级：</div>
          </div>
          <div class="person">
            <div>{{ user.username }}</div>
            <div>{{ user.email }}</div>
            <div>{{ user.college }}</div>
            <div>{{ user.major }}</div>
            <div>{{ user.grade }}</div>
          </div>
        </div>
      </div>
    </el-card>
    <homecalender></homecalender>
  </div>
</template>

<script>
import homecalender from "@/components/user/HomeCalender.vue";

export default {
  components: {
    homecalender, //在此处注册
  },
  name: "Home",
  data() {
    return {
      user :{
        username : '',
        email : '',
        college : '',
        major : '',
        grade : '',
        headerUrl : ''
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.$axios.get("http://localhost:8000/getUserInfo", {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      }).then(res => {
        console.log(res.data)
        this.user.username = res.data.username
        this.user.email = res.data.email
        this.user.college = res.data.college
        this.user.major = res.data.major
        this.user.grade = res.data.grade
        this.getUserHeaderStr(res.data.id)
      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.message)
      })
    },
    getUserHeaderStr(userId) {
      this.$axios.get("http://localhost:8000/image/" + userId, {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      }).then(res => {
        
        this.user.headerUrl = 'data:image/png;base64,' + res.data
        console.log(this.user.headerUrl)
      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.message)
      })
    }
  },
};
</script>

<style scoped lang="less">
.userInfo {
  display: flex;
  flex-direction: row !important;
  gap: 16px;
  width: auto;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: auto; //更改竖向分割线长度
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}
.info {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}
.person {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  height: 100%;
}
</style>
